<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            border: 1px solid;
        }
    </style>
</head>

<body>
    <canvas width="500" height="500" id="mycanvas"></canvas>
    <script>
        // 定义一个数组保存地址
        // let arr = ["https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp02%2F1Z9191923035R0-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,
        // 10000&q=a80&n=0&g=0n&fmt=auto?sec=1661397561&t=a620034e48d31890e7e652561c79083b",
        //"https://img2.baidu.com/it/u=1713796643,4188877777&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        //"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F1Z9291TIBZ6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661397561&t=d113fcaf5515f719281a37f6e928b213"];

        // 预加载：不能控制加载的顺序 ；
        // function loadImg(arr,cb){
        //     let count = 0;
        //     let imgarr = [];
        //     arr.forEach(src=>{
        //新建图片
        //         let imgEle =  new Image();
        //         imgEle.src = src;
        //         imgEle.onload = function(){
        //             count++;
        //             imgarr.push(this);
        //             if(count>=arr.length){
        //                 // 加载好了 
        //                 cb(imgarr);
        //             }
        //         }
        //     })
        //     // console.log("加载好了")
        // }

        // 用对象存地址
        let obj = {
            bg1: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp02%2F1Z9191923035R0-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661397561&t=a620034e48d31890e7e652561c79083b",
            bg2: "https://img2.baidu.com/it/u=1713796643,4188877777&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
            bg3: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F1Z9291TIBZ6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661397561&t=d113fcaf5515f719281a37f6e928b213"
        };

        // console.log(obj);

        // 控制 可以具体加载哪一张 
        function loadImg(obj, cb) {
            // 返回一个Promise对象
            return new Promise((resolve) => {
                // 知道 对象的长度 
                let length = 0;
                for (let key in obj) {
                    length++;
                }

                console.log("对象的长度", length);
                // 记录图片加载好的数量
                let count = 0;
                // 循环加载对象里的图片
                let resObj = {};  // 一一的对应关系
                for (let k in obj) {// obj存的是地址
                    let imgEle = new Image();
                    imgEle.src = obj[k];// in拿到的是键名
                    imgEle.onload = function () {
                        count++;
                        resObj[k] = this;
                        // 这个放在里面是因为,放外面会因为加载时间而导致加载不出来,所以写在回调(onload)里
                        if (count >= length) {
                            // 所有的图片加载完毕
                            cb && cb(resObj);  // 如果有cb就调用cb
                            resolve(resObj);   // 把resObj作为值传过去
                        }
                    }
                }
                console.log('1');
            })

        }



        let canvas = document.querySelector("#mycanvas");
        // 获取上下文 ；画笔
        let context = canvas.getContext("2d");
        // loadImg(obj, function (resObj) {
        //     console.log(resObj);
        //     context.drawImage(resObj['bg1'], 0, 0, 100, 100);
        //     context.drawImage(resObj['bg2'], 200, 200, 100, 100);
        //     context.drawImage(resObj['bg3'], 300, 300, 100, 100);
        // })
        loadImg(obj).then(resObj => {
            // 加载成功的话执行,resObj就是加载用的对象
            console.log(resObj);
            context.drawImage(resObj['bg1'], 0, 0, 100, 100);
            context.drawImage(resObj['bg2'], 200, 200, 100, 100);
            context.drawImage(resObj['bg3'], 300, 300, 100, 100)
        })

        // 总结: 先生成对象存所有的图片标签,(地址与数据中的地址一一对应)
        // 给每个图片标签绑定onload事件,如果图片全加载完,执行回调和promise.then
        // 设置画布
        // 编写promise.then,拿到生成的对象(存了图片标签),把图片标签用canvas画出来
    </script>
</body>

</html>